<?php

$this->Html->css(array('custom','font', 'app.v2', 'select2','colorpicker','jquery-ui'), array('inline' => false));
$this->Html->script(array(
	'app.v2',
	'fuelux/fuelux',
	'datepicker/bootstrap-datepicker',
	'slider/bootstrap-slider',
	'file-input/bootstrap.file-input',
	'combodate/moment.min',
	'combodate/combodate',
	'parsley/parsley.min',
	'select2/select2.min',
	'underscore-min',
	'datatables/jquery.dataTables.min',
	'jquery.min',
	'dropzone',
    'colorpicker',
	'fabric',
	'script',
	'jquery-ui'
), array('inline' => false));
$this->assign('button_save_template','<a class="btn btn-sm btn-primary" href="javascript:void(0)" onclick="saveTemplate('.$this->params['pass'][0].')"><i class="fa fa-check"></i> SAVE</a>');
?>
<section id="content" class="content-sidebar bg-white tools-page">
    <!-- .sidebar -->
    <aside class="sidebar bg-lighter sidebar">
        <div class="text-center clearfix">
            <button class="btn btn-sm btn-danger m-t m-b" onclick="previewCanvas()"><i class="fa fa-edit"></i> Preview</button>
            <button class="btn btn-sm btn-danger m-t m-b" onclick="downloadCanvas()"><i class="fa fa-edit"></i> Download</button>
        </div>
        <div class="panel-group m-b" id="accordion2">
            <div class="panel">
                <div class="panel-heading bg-white list-group-item infographic-tools">
                    <i class="fa fa-fw fa-apple fa-2x"></i>
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                        Icons
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </div>
                <div id="collapseOne" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                    <div class="panel-body text-small">
                        <ul class="tools-photos">
                            <li><?php echo $this->Html->image('icons/1.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/2.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/3.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/4.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/5.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/6.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/7.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/8.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/9.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/1.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/2.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/3.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/4.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/5.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/6.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/7.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/8.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('icons/9.svg', array("width"=>"51","height"=>"51","onclick" => "addIcon($(this).attr('src'))"));?></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="panel">
                <div class="panel-heading bg-white list-group-item infographic-tools">
                    <i class="fa fa-fw fa-font fa-2x"></i>
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                        Text 
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                    <div class="panel-body text-small">
                        <div class="list-group">
                            <a class="list-group-item bg-lighter" style="cursor: pointer; font-size: 17px;" onclick="addTexts('Title: Double click to edit', 'Comic Sans', 40)">Title</a>
                            <a style="cursor: pointer; font-size: 17px;" onclick="addTexts('Subtitle: Double click to edit', 'Arial', 30)" class="list-group-item">Body </a>
                            <a style="cursor: pointer; font-size: 17px;" onclick="addTexts('Subtitle 2: Double click to edit', 'Time New Roman', 20)" class="list-group-item">SubText 1 </a>
                            <a style="cursor: pointer; font-size: 17px;" onclick="addTexts('Body Text: Double click to edit', 'Time New Roman', 14)" class="list-group-item">SubText 2 </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel-heading bg-white list-group-item infographic-tools">
                    <i class="fa fa-fw fa-star fa-2x"></i>
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree" >
                        Background 
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </div>
                <div id="collapseThree" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                    <div class="panel-body text-small">
                        <ul class="tools-photos">
						 <li><?php echo $this->Html->image('background/1.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/2.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/3.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/4.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/5.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/6.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/7.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/8.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/9.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/1.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/2.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/3.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/4.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/5.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/6.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/7.png', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/8.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('background/9.jpg', array("width"=>"51","height"=>"51","onclick" => "addBackground($(this).attr('src'))"));?></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel-heading bg-white list-group-item infographic-tools">
                    <i class="fa fa-fw fa-apple fa-2x"></i>
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse-photo">
                        Photo
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </div>
                <div id="collapse-photo" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                    <div class="panel-body text-small">
                        <ul class="tools-photos">
                            <li><?php echo $this->Html->image('photos/1.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/2.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/3.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/4.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/5.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/6.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/7.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/8.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/9.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/10.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/11.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/12.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/13.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/14.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/15.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/16.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/17.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                            <li><?php echo $this->Html->image('photos/18.png', array("width"=>"51","height"=>"51","onclick" => "addPhotos($(this).attr('src'))"));?></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="panel-heading bg-white list-group-item infographic-tools">
                    <i class="fa fa-fw fa-font fa-2x"></i>
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse-upload">
                        Uploads 
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </div>
                <div id="collapse-upload" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                    <h3>UPLOAD IMAGE</h3>
                    <div id="clickable" class="dz-clickable">
                        <p>Drag image here or into canvas to upload</p>
                        <?php echo $this->Html->image('images/select-image.png'); ?>
                    </div>
                    <div id="previews" class="dropzone-previews"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- /.sidebar -->


    <!-- .sidebar -->
    <section class="main">
        <div id="wrap-custom">
            <ul class="main-custom">
                <li class="setting">
                    <a class="setting-icon"></a>
                    <ul class="submenusetting">
                        <li class="titlesetting">Canvas Width</li>
                        <li><input type="text" size="20" id="canwidth" placeholder="820px" onchange="changeWidthCanvas()"></li>
                        <li class="titlecheckbox"><input type="checkbox" checked="checked"> Resize Content</li>
                        <li class="titlecheckbox">Block Height</li>
                        <li> <input type="text" size="20" id="canheight" placeholder="600px" onchange="changeHeightCanvas();"></li>
                    </ul>
                </li>
                <li><a class="down-icon"></a></li>
                <li><a class="up-icon"></a></li>
                <li><a class="clone-icon"></a></li>
                <li><a class="delete-icon"></a></li>
                <li><a class="add-icon"></a></li>
                <li><a class="group-icon"></a></li>
                <li><a class="clock-icon" onclick="setLockX(!getLockX(), !getLockY());"></a></li>
                <li><a class="color-icon" id="colorSelector" href="#" onclick ="colorSelector()"></a></li>
                <li class="opacity">
                    <a id="opac" class="opacity-icon"></a>
                    <div id="wrap-slider">
                        <h4>Opacity:</h4>
                        <div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 100%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 100%;"></span></div>
                        <div id="sliderbottom">
                            <p style="float:left; margin-left:10px; color:#fff; font-size:13px;">0%</p>
                            <p style="float:right; margin-right:10px; color:#fff; font-size:13px;">100%</p><p>
                            </p></div>
                    </div>
                </li>
                <li>
                    <div class="styled-select slate">
                        <select id="font-family">
                            <option value="arial">Arial</option>
                            <option value="helvetica" selected="">Helvetica</option>
                            <option value="myriad pro">Myriad Pro</option>
                            <option value="delicious">Delicious</option>
                            <option value="verdana">Verdana</option>
                            <option value="georgia">Georgia</option>
                            <option value="courier">Courier</option>
                            <option value="comic sans ms">Comic Sans MS</option>
                            <option value="impact">Impact</option>
                            <option value="monaco">Monaco</option>
                            <option value="optima">Optima</option>
                            <option value="hoefler text">Hoefler Text</option>
                            <option value="plaster">Plaster</option>
                            <option value="engagement">Engagement</option>
                        </select>
                    </div>
                </li>
                <li>
                    <div class="styled-select-size slate-size">
                        <select id="font-size">
                            <option value="8" selected="">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="14">14</option>
                            <option value="16">16</option>
                            <option value="18">18</option>
                        </select>
                    </div>
                </li>
                <li><a  class="bold-icon" onclick="toggleBold()"></a></li>
                <li><a  class="italy-icon"  onclick="toggleItalic()"></a></li>
                <li class="align">
                    <a class="align-icon"></a>
                    <ul class="submenu">
                        <li><a class="align-left" onclick="alignText('Left')"></a></li>
                        <li><a class="align-center" onclick="alignText('Center')"></a></li>
                        <li><a class="align-right" onclick="alignText('Right')"></a></li>
                        <li><a class="align-justify" onclick="alignText('Justify')"></a></li>
                    </ul>
                </li>
                <li><a class="link-icon"></a></li>
                <li class="arrange">
                    <a class="arrange-icon"></a>
                    <ul class="submenu">
                        <li><a style="cursor: pointer;" class="bring-to-front" onclick="bringToFront()"></a></li>
                        <li><a style="cursor: pointer;" class="send-to-back" onclick="sendToBack()"></a></li>
                        <li><a style="cursor: pointer;" class="bring-forward" onclick="bringForward()"></a></li>
                        <li><a style="cursor: pointer;" class="send-backward" onclick="sendBackwards()"></a></li>
                    </ul>
                </li>
                <li><a class="laugh-icon"></a></li>

            </ul>
        </div>
        <div id="wrap-canvas">
            <div class="container_canvas">
                <canvas id="canvas" width="800" height="450"></canvas>
            </div>
            <ul>
                <li><a class="undo-icon" onclick="undo()"><span>Undo</span> </a></li>
                <li><a  class="redo-icon" onclick="redo()"><span>Redo</span></a></li>
                <li><a  class="copy-icon" onclick="copy()"><span>Copy</span></a></li>
                <li><a  class="cut-icon" onclick="cut()"><span>Cut</span></a></li>
                <li><a  class="past-icon" onclick="paste()"><span>Paste</span></a></li>
                <li><a class="recycle-icon" onclick="removeSelected()"><span>Delete</span></a></li>
                <li><a  class="align-left-icon" onclick="align_left()"><span>Align</span></a></li>
            </ul>
        </div>
    </section>
    <!-- /.sidebar -->

    <!-- .sidebar -->
    <!--
    <aside class="sidebar bg-lighter sidebar">
            <div class="panel-group m-b" id="accordion2">
                    <div class="panel">
                            <div class="panel-heading bg-white list-group-item infographic-tools">
                                    <i class="fa fa-fw fa-apple fa-2x text-primary"></i>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                                            Graphics
                                            <i class="fa fa-chevron-right"></i>
                                    </a>
                            </div>
                            <div id="collapseOne" class="panel-collapse" style="border-top: 1px solid #fff;">
                                    <div class="panel-body text-small">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                    </div>
                            </div>
                    </div>
                    
                    <div class="panel">
                            <div class="panel-heading bg-white list-group-item infographic-tools">
                                    <i class="fa fa-fw fa-font fa-2x text-warning"></i>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                                            Text 
                                            <i class="fa fa-chevron-right"></i>
                                    </a>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                                    <div class="panel-body text-small">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
                                    </div>
                            </div>
                    </div>
                    <div class="panel">
                            <div class="panel-heading bg-white list-group-item infographic-tools">
                                    <i class="fa fa-fw fa-star fa-2x text-danger"></i>
                                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree" >
                                            Background 
                                            <i class="fa fa-chevron-right"></i>
                                    </a>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse" style="border-top: 1px solid #fff;">
                                    <div class="panel-body text-small">
                                            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
                                    </div>
                            </div>
                    </div>
            </div>
    </aside>
    -->
    <!-- /.sidebar -->
</section>
























